<template>
	<div class="pic-upload-module">
		<!-- 预览 大图 -->
		<div
			@click="imgViewConfigInit"
			@mousemove="imgStyleMove"
			@mousewheel="imgStyleMouse"
			class="detailsImgView"
			v-if="imgUrl&&action.indexOf('details') > -1&&detailsBool"
			:style="imgViewStyle"
		>
			<i @click="imgStyleInit" class="el-icon-close close"></i>
			<img :src="imgUrl">
		</div>
		<!--  END  -->
		<div class="img" @dblclick="imgStyleInit">
			<img v-if="!imgUrl" :src="noImgUrl">
			<img v-else :src="imgUrl" ref="img" @load="handleCanvas" class="img_canvas">
			<canvas ref="canvas" class="canvas" :class="{hide: canvasHide}"></canvas>
		</div>
		<div class="upload" v-if="action.indexOf('upload') > -1">
			<el-upload
				class="avatar-uploader"
				action="/saveImageFile"
				:show-file-list="false"
				:on-success="handlePicSuccess"
				:on-error="handlePicError"
				:before-upload="beforePicUpload"
			>
				<i class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
		</div>
		<!--		<el-dialog :visible.sync="picDialog.visible">-->
		<!--			<img :src="imgUrl"/>-->
		<!--		</el-dialog>-->
	</div>
</template>

<script>
	export default {
		name: "picUpload",
		data() {
			return {
				detailsBool: false,
				noImgUrl: "",
				imgUrl: "",
				fileUploadUrl: "",
				picDialog: {
					visible: false
				},
				positionArr: [],
				canvasHide: true,
				imgViewStyle: {
					width: "0rem",
					left: "5vw",
					top: "20%",
					transform: "scale(1, 1)"
				},
				imgViewConfig: {
					leftNumLast: 0,
					leftNum: 0,
					topNumLast: 0,
					topNum: 0,
					scaleNum: 1,
					imgViewMoveBool: false
				}
			};
		},
		props: {
			action: {
				type: Array,
				default() {
					return [];
				}
			},
			picInfo: {
				type: Object,
				default() {
					return {
						url: "",
						iconPosition: []
					};
				}
			}
		},
		watch: {
			picInfo: {
				handler(val) {
					let obj = Object.assign({}, val);
					this.imgUrl = obj.url;
					this.canvasHide = true;
					this.positionArr = [].concat(val.iconPosition);
				},
				deep: true,
				immediate: true
			}
		},
		created() {
			this.fileUploadUrl = window.fileLoadUrl;
			this.handleNoImg();
		},
		mounted() {},
		methods: {
			// 预览图片 展开隐藏函数
			imgStyleInit() {
				this.detailsBool = !this.detailsBool;
				let obj = {
					width: "4rem",
					left: "5vw",
					top: "20%",
					transform: "scale(1, 1)"
				};
				if (!this.detailsBool) {
					obj.width = "0rem";
				}
				this.imgViewConfig = {
					leftNumLast: 0,
					leftNum: 0,
					topNumLast: 0,
					topNum: 0,
					scaleNum: 1,
					imgViewMoveBool: false
				};
				this.imgViewStyle = obj;
			},
			imgViewConfigInit() {
				this.imgViewConfig.imgViewMoveBool = !this.imgViewConfig.imgViewMoveBool;
				this.imgViewConfig.leftNumLast = 0;
				this.imgViewConfig.topNumLast = 0;
			},
			// 预览图片 鼠标滚动缩放事件
			imgStyleMouse(v) {
				if (!this.detailsBool||this.imgViewConfig.imgViewMoveBool) {
					return;
				}
				if (v.deltaY > 0 && this.imgViewConfig.scaleNum > 0.1) {
					this.imgViewConfig.scaleNum -= 0.1;
					this.imgViewStyle.transform = `scale(${this.imgViewConfig.scaleNum}, ${this.imgViewConfig.scaleNum})`;
				}
				if (v.deltaY < 0 && this.imgViewConfig.scaleNum < 6) {
					this.imgViewConfig.scaleNum += 0.1;
					this.imgViewStyle.transform = `scale(${this.imgViewConfig.scaleNum}, ${this.imgViewConfig.scaleNum})`;
				}
			},
			// 预览图片 鼠标移动事件
			imgStyleMove(v) {
				if (!this.imgViewConfig.imgViewMoveBool) {
					return;
				}
				if (
					this.imgViewConfig.leftNumLast === 0 ||
					this.imgViewConfig.topNumLast === 0
				) {
					this.imgViewConfig.leftNumLast = v.clientX;
					this.imgViewConfig.topNumLast = v.clientY;
				} else {
					this.imgViewConfig.leftNum =
						this.imgViewConfig.leftNum +
						(v.clientX - this.imgViewConfig.leftNumLast);
					this.imgViewConfig.topNum =
						this.imgViewConfig.topNum +
						(v.clientY - this.imgViewConfig.topNumLast);
					this.imgViewConfig.leftNumLast = v.clientX;
					this.imgViewConfig.topNumLast = v.clientY;
					let strL =
						this.imgViewStyle.leftNum > 0
							? `calc(5vw + ${this.imgViewConfig.leftNum}px)`
							: `calc(5vw - ${0 - this.imgViewConfig.leftNum}px)`;
					let strT =
						this.imgViewStyle.topNum > 0
							? `calc(20% + ${this.imgViewConfig.topNum}px)`
							: `calc(20% - ${0 - this.imgViewConfig.topNum}px)`;
					this.imgViewStyle.left = strL;
					this.imgViewStyle.top = strT;
				}
			},
			handleNoImg() {
				let img = new Image();
				img.src = this.$noImgUrl;
				let that = this;
				img.onload = function() {
					that.$compressImg(this, "", 300, 500).then(url => {
						that.noImgUrl = url;
					});
				};
			},
			// 上传成功
			handlePicSuccess(res) {
				if (res) {
					this.imgUrl = res.svcCont.data;
					this.$emit("imgUrl", this.imgUrl);
					this.positionArr = [];
					this.canvasHide = true;
				}
			},
			// 上传失败
			handlePicError() {
				this.$message.error("上传失败");
			},
			// 上传前
			beforePicUpload(file) {
				let { size } = file;
				if (size > 1048576) {
					this.$message.error("图片大小不能超过1024kb");
					return false;
				}
				return true;
			},
			// 图片处理
			handleCanvas(e) {
				let img1 = e.target;
				let img = new Image();
				img.src = this.imgUrl + "?v=" + Math.random();
				// img.setAttribute('crossOrigin', 'anonymous');
				let canvas = this.$refs.canvas;
				let ctx = canvas.getContext("2d");
				let that = this;
				img.onload = function() {
					canvas.width = img.width;
					canvas.height = img.height;
					canvas.style.width = img1.width + "px";
					canvas.style.height = img1.height + "px";
					// ctx.drawImage(img, 0, 0);
					ctx.fillStyle = "rgba(255, 255, 255, 0)";
					ctx.strokeStyle = "red";
					ctx.lineWidth = "4";
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					if (that.positionArr.length > 0) {
						that.positionArr.forEach(item => {
							ctx.strokeRect(item.start_x, item.start_y, item.width, item.height);
						});
						that.canvasHide = false;
						// that.imgUrl = canvas.toDataURL('image/png');
						// let imgDom = document.querySelector(".img");
						// imgDom.innerHTML = '<img src="'+canvas.toDataURL('image/png')+'" @click="handleOpen">';
					}
				};
			},
			handleOpen() {
				this.picDialog.visible = true;
			}
		}
	};
</script>

<style scoped lang="scss">
	.pic-upload-module {
		position: relative;
		cursor: pointer;
		width: 100%;
		height: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border: 1px solid #ebeef5;

		.detailsImgView {
			position: fixed;
			//   left: 50%;
			//   top: 50%;
			// -webkit-transform: translate(-50%, -50%);
			// -moz-transform: translate(-50%, -50%);
			// -ms-transform: translate(-50%, -50%);
			// -o-transform: translate(-50%, -50%);
			// transform: translate(-50%, -50%);
			z-index: 9999;
			img {
				width: 100%;
				// height: 100%;
			}
			.close {
				position: absolute;
				font-size: 0.3rem;
				top: -20px;
				right: -20px;
				z-index: 10000;
				font-weight: 400;
				color: #303133;
				transition: all 0.5s ease;
				opacity: 0.6;
			}
			.close:hover {
				font-weight: 600;
				font-size: 0.4rem;
				color: #f56c6c;
				opacity: 0.8;
				transform: rotate(90deg);
			}
		}

		.img {
			width: 100%;
			height: 100%;
			-webkit-touch-callout: none;

			-webkit-user-select: none;

			-khtml-user-select: none;

			-moz-user-select: none;

			-ms-user-select: none;

			user-select: none;
			& > img {
				max-width: 100%;
				max-height: 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}

			.canvas {
				display: block;
				background: rgba(255, 255, 255, 0);
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);

				&.hide {
					opacity: 0;
				}
			}
		}

		#draw-img {
			display: none;
		}

		.upload {
			width: 100%;
			position: absolute;
			bottom: -60px;
			background-color: rgba(0, 0, 0, 0.5);
			opacity: 0;
			-webkit-transition: all 1s;
			-moz-transition: all 1s;
			-ms-transition: all 1s;
			-o-transition: all 1s;
			transition: all 1s;

			.avatar-uploader .el-upload {
				background-color: #fff;
				border: 1px dashed #d9d9d9;
				border-radius: 3px;
				cursor: pointer;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409eff;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 60px;
				height: 60px;
				line-height: 60px;
				text-align: center;
			}

			.avatar {
				width: 60px;
				height: 60px;
				display: block;
			}
		}

		&:hover .upload {
			opacity: 1;
			-webkit-transform: translateY(-60px);
			-moz-transform: translateY(-60px);
			-ms-transform: translateY(-60px);
			-o-transform: translateY(-60px);
			transform: translateY(-60px);
		}

		.el-dialog__body {
			img {
				width: 100%;
			}
		}
	}
</style>
